<template>
  <!-- eslint-disable-next-line  -->
  <el-col :xs="24" :sm="12" :md="8" :lg="6" @click.native="$router.push(`/detail/${car._id}`)">
    <el-card class="my-2 cursor-pointer hover:-translate-y-1" shadow="hover">
      <el-image class="h-[161px]" :src="car.img" />
      <p class="carName">{{ car.carName }}</p>
      <p class="carStructure">{{ car.structure }}</p>
      <p class="payment">{{ car.rent }}元/日</p>
    </el-card>
  </el-col>
</template>

<script>
  export default {
    name: 'CarCard',
    props: ['car'],
    data() {
      return {}
    },
    methods: {},
  }
</script>

<style scoped>
  .carName {
    margin-left: 20px;
    font-size: 17px;
    font-weight: 600;
    color: #222;
    margin-top: 10px;
  }
  .carStructure {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    font-weight: 100;
    font-size: 14px;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .payment {
    display: inline-block;
    margin-left: 20px;
    margin-top: 10px;
    font-size: 24px;
    color: red;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
